<route lang="json5" type="page">
{
  "needLogin": true,
  "style": {
    "navigationBarTitleText": "预警邮箱"
  }
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'

// 定义邮箱条目
interface Email {
  id: number
  address: string | null
}

// 定义每个表对应的邮箱列表
interface MeterEmails {
  id: number
  name: string
  emails: Email[]
}

// 模拟数据
const meters = ref<MeterEmails[]>([
  {
    id: 1,
    name: '501电表',
    emails: [{ id: 101, address: 'example@test.com' }],
  },
  {
    id: 2,
    name: '502水表',
    emails: [
      { id: 201, address: 'another@example.com' },
    ],
  },
])

const showPopup = ref(false)
const editingEmail = ref<Email | null>(null)
const addingToMeter = ref<MeterEmails | null>(null)
const newEmailAddress = ref('')

// 打开编辑弹窗
function showEditDialog(email: Email) {
  editingEmail.value = email
  addingToMeter.value = null
  newEmailAddress.value = email.address || ''
  showPopup.value = true
}

// 打开新增弹窗
function showAddDialog(meter: MeterEmails) {
  editingEmail.value = null
  addingToMeter.value = meter
  newEmailAddress.value = ''
  showPopup.value = true
}

// 确认修改或添加
function handleConfirm() {
  const emailRegex = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/

  // 编辑模式
  if (editingEmail.value) {
    if (newEmailAddress.value === '' || emailRegex.test(newEmailAddress.value)) {
      editingEmail.value.address = newEmailAddress.value || null
      uni.showToast({ title: '设置成功', icon: 'success' })
      showPopup.value = false
    }
    else {
      uni.showToast({ title: '请输入正确的邮箱地址', icon: 'none' })
    }
  }
  // 添加模式
  else if (addingToMeter.value) {
    if (emailRegex.test(newEmailAddress.value)) {
      addingToMeter.value.emails.push({
        id: Date.now(),
        address: newEmailAddress.value,
      })
      uni.showToast({ title: '添加成功', icon: 'success' })
      showPopup.value = false
    }
    else {
      uni.showToast({ title: '请输入有效的邮箱地址', icon: 'none' })
    }
  }
}

// 为邮箱条目生成标题
function getEmailLabel(index: number) {
  return index === 0 ? '预警邮箱' : `预警邮箱${index + 1}`
}
</script>

<template>
  <view class="min-h-screen py-3">
    <view v-for="meter in meters" :key="meter.id" class="mb-3">
      <wd-card :title="meter.name">
        <wd-cell-group :border="false">
          <wd-cell
            v-for="(email, index) in meter.emails"
            :key="email.id"
            :title="getEmailLabel(index)"
            :value="email.address || ''"
            is-link
            @click="showEditDialog(email)"
          />
          <wd-cell title="添加邮箱" is-link @click="showAddDialog(meter)">
            <template #value>
              <wd-icon name="add-circle" size="20px" custom-class="!text-blue-500" />
            </template>
          </wd-cell>
        </wd-cell-group>
      </wd-card>
    </view>

    <!-- 编辑邮箱弹窗 -->
    <wd-popup v-model="showPopup" position="bottom" :safe-area-inset-bottom="true">
      <view class="p-4">
        <view class="mb-4 flex items-center justify-between">
          <wd-button type="text" @click="showPopup = false">
            取消
          </wd-button>
          <text class="font-bold">
            {{ editingEmail ? '编辑邮箱' : '添加邮箱' }}
          </text>
          <wd-button type="text" custom-class="!text-blue-500" @click="handleConfirm">
            确定
          </wd-button>
        </view>
        <wd-input
          v-model="newEmailAddress"
          label="邮箱"
          placeholder="请输入邮箱地址"
          type="text"
          clearable
        />
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
// UnoCSS 在处理 value-class 时可能需要 ! 前缀来覆盖默认样式
:deep(.wd-cell__value) {
  color: #3b82f6;
}
</style>
